<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Demo</title>
		<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
		<link href="lib/layui/css/layui.css" rel="stylesheet">
		<script type="text/javascript" src="./js/xadmin.js"></script>
	</head>
	<body>
		<div class="layui-card-header">
			<button class="layui-btn" onclick="xadmin.open('添加','./chaser_add.html',450,320)"><i
					class="layui-icon"></i>添加</button>
		</div>
		<table class="layui-hide" id="ID-table-demo-templet"></table>
		<script type="text/html" id="ID-table-demo-templet-user">
			<a href="" target="_blank">{{= d.username }}</a>
		</script>
		<script type="text/html" id="listCRUD">
			<a title="删除" onclick="member_del(this,'{{d.salary_id}}')" href="javascript:;">
				<i class="layui-icon">&#xe640;</i>
			</a>
		</script>
		<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
		<script src="lib/layui/layui.js"></script>
		<script>
			layui.use(['table'], function() {
				var table = layui.table;
				var form = layui.form;

				// 创建渲染实例
				table.render({
					elem: '#ID-table-demo-templet',
					url: 'user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
					page: true,
					height: '500px',
					even: true,
					cols: [
						[
							// 未自定义模板的普通列
							{
								field: 'id',
								fixed: 'left',
								width: 80,
								title: 'ID',
								sort: true
							},
							// 模板 - 选择器写法
							{
								field: 'username',
								width: 180,
								title: '编队名称',
								templet: '#ID-table-demo-templet-user'
							},
							// 模板 - 函数写法
							// 模板 - 普通字符写法
							{
								field: 'ip',
								width: 180,
								title: '直升机数量',
								templet: '<div> {{= d.city }}</div>'
							},
							{
								field: 'ip',
								width: 180,
								title: '驱逐舰数目',
								templet: '<div> {{= d.city }}</div>'
							},
							{
								field: 'ip',
								width: 180,
								title: '护卫舰数目',
								templet: '<div> {{= d.city }}</div>'
							},
							{
								field: 'ip',
								width: 180,
								title: '补给舰数目',
								templet: '<div> {{= d.city }}</div>'
							},
							{
								field: 'ip',
								width: 180,
								title: '猎潜艇数目',
								templet: '<div> {{= d.city }}</div>'
							},
							{
								field: 'username',
								width: 180,
								title: '操作',
								templet: '#listCRUD'
							},
						]
					]
				});

				// 状态 - 开关操作
				form.on('switch(demo-templet-status)', function(obj) {
					var id = this.value;
					var name = this.name;
					layer.tips(id + ' ' + name + ': ' + obj.elem.checked, obj.othis);
				});

			});
		</script>
	</body>
</html>
